import React, { Component } from 'react'
import { Container, Content, Tab, Tabs, TabHeading } from 'native-base'
import { Text } from 'react-native'
import TabShareIncome from './tabShareIncome'
import TabRecruitFCIncome from './tabRecruitFCIncome'
import TabRecruitGFCIncome from './tabRecruitGFCIncome'
import TabRecruitIncome from './tabRecruitIncome'
import TabOtherIncome from './tabOtherIncome'
import commonStyle from '../../../../libs/commonStyle'

export default class IncomeTab extends Component {
  constructor (props) {
    super(props)
    this.state = {
      currentTab: 0
    }
  }
  render () {
    return (
          <Tabs
            tabBarUnderlineStyle={{
              borderBottomWidth: 3,
							backgroundColor: '#C30D23',
              borderBottomColor: '#C30D23'
            }}
						onChangeTab={({i, ref, from}) => {
							this.setState({
								currentTab: i
							})
						}}
          >
            <Tab
              heading={
                <TabHeading
                  style={{ backgroundColor: '#f5f5f5' }}
                >
                  <Text
                    style={[
                      this.state.currentTab === 0
                        ? commonStyle.activeColor
                        : commonStyle.colorBlack2
                    ,commonStyle.f26]}
                  >
                    转发收入
                  </Text>
                </TabHeading>
              }
            >
              <TabShareIncome />
            </Tab>
            <Tab
              heading={
                <TabHeading
                  style={{ backgroundColor: '#f5f5f5', color: '#777' }}
                >
                  <Text
                    style={[
                      this.state.currentTab === 1
                        ? commonStyle.activeColor
                        : commonStyle.colorBlack2
                    ,commonStyle.f26]}
                  >
                    徒弟分成
                  </Text>
                </TabHeading>
              }
            >
              <TabRecruitFCIncome />
            </Tab>
            <Tab
              heading={
                <TabHeading
                  style={{ backgroundColor: '#f5f5f5', color: '#777' }}
                >
                  <Text
                    style={[
                      this.state.currentTab === 2
                        ? commonStyle.activeColor
                        : commonStyle.colorBlack2
                    ,commonStyle.f26]}
                  >
                    徒孙分成
                  </Text>
                </TabHeading>
              }
            >
              <TabRecruitGFCIncome />
            </Tab>
            <Tab
              heading={
                <TabHeading
                  style={{ backgroundColor: '#f5f5f5', color: '#777' }}
                >
                  <Text
                    style={[
                      this.state.currentTab === 3
                        ? commonStyle.activeColor
                        : commonStyle.colorBlack2
                    ,commonStyle.f26]}
                  >
                    收徒奖励
                  </Text>
                </TabHeading>
              }
            >
              <TabRecruitIncome />
            </Tab>
            <Tab
              heading={
                <TabHeading
                  style={{ backgroundColor: '#f5f5f5', color: '#999' }}
                >
                  <Text
                    style={[
                      this.state.currentTab === 4
                        ? commonStyle.activeColor
                        : commonStyle.colorBlack2
                    ,commonStyle.f26]}
                  >
                    其他收入
                  </Text>
                </TabHeading>
              }
            >
              <TabOtherIncome />
            </Tab>
          </Tabs>
    )
  }
}
